<script>
    lignes = []
    comptes = []
    {% for compte in reglement.client.comptes %}
    compte = new Object()
    compte.id = '{{compte.id}}'
    compte.value = '{{compte}}'
    comptes[comptes.length] = compte
                                        {% endfor %}
{% for ligne in lignes %}
    ligne = new Object()
    ligne.ids = []
    ligne.factures = []
    ligne.bonsLivraison = []
    {% for id in ligne.ids %}
    ligne.ids[ligne.ids.length] = '{{id}}'
        {% endfor %}
            {% for facture in ligne.factures %}
    ligne.factures[ligne.factures.length] = '{{facture}}'
        {% endfor %}
            {% for bonLivraison in ligne.bonsLivraison %}
    ligne.bonsLivraison[ligne.bonsLivraison.length] = '{{bonLivraison}}'
        {% endfor %}
    ligne.montant = '{{ligne.montant}}'
    ligne.date_echeance = '{{ligne.date_echeance|date('d/m/Y')}}'
    ligne.numero_piece = '{{ligne.numero_piece}}'
    {% if ligne.compte_bancaire %}
    ligne.compte_bancaire = '{{ligne.compte_bancaire.id}}'
    {% endif %}
    ligne.etat = '{{ligne.etat}}'
    ligne.type = '{{ligne.type}}'
    lignes[lignes.length] = ligne
    {% endfor %}

    </script>
    <div class="span12">
        <div class="box gradient">
            <div class="title">
                <h4>
                    <span>Information</span>
                </h4>
            </div>
            <div class="content noPad clearfix">
                <table style="width: 100%">
                    <tbody>
                        <tr>
                            <td style="width: 15%">
                                <label>Date:</label>
                                <span> {{reglement.date|date('d/m/Y')}}</span>
                            </td>
                            <td style="width: 15%">
                                <label>Heure:</label>
                                <span> {{reglement.getTime}}</span>
                            </td>
                            <td style="width: 15%">
                                <label>Client:</label>
                                <span>{{reglement.client}}</span>
                            </td>
                            <td style="width: 15%">
                                <label>Reference:</label>
                                <span>{{reglement.reference}}</span>
                            </td>

                            <td style="width: 40%">
                                <label>Utilisateur:</label>
                                <span>{{reglement.user}}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div> 
        </div>
    </div>
    <div class="span12"  style="margin-left:0">
        <div class="box">

            <div class="title">

                <h4>
                    <span class="icon16 brocco-icon-grid"></span>
                </h4>
                <a style="display: block;" href="#" class="minimize">Minimize</a>
            </div>
            <div style="display: block;" class="content noPad">
                <table class="responsive table table-bordered">
                    <thead>
                        <tr>
                            <th style="width:3%">N°</th>
                            <th style="width:15%">Type</th>
                            <th style="width:30%">Montant</th>
                            <th>Numero Piece</th>
                            <th style="width:7%">Compte Bancaire</th>
                            <th style="width:10%">Date Echeance</th>
                            <th style="width:5%">etat</th>
                            <th>Supprimer</th>
                        </tr>
                    </thead>
                    <tbody id="list_ligne_reglement">
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <div class="span2" style="margin-right: 0">
        <table>
            <tr>
                <td><input style="width:100px" type="button" class="btn btn-info cut-icon-previous"  value="Retour" onclick="retourListeReglement()"></td>
            </tr>
            <tr>
                <td style="height: 20px"></td>
            </tr>
            <tr>
                <td><input style="width: 100px" type="button" class="btn btn-info cut-icon-previous"  value="Enregistrer" onclick="saveReglement()"></td>
            </tr>
        </table>
    </div>

    <script>
    $(document).ready(function() {

        reloadReglement()
    })
    function saveReglement() {
        var valide = true
        $('.error').remove()
        $('input[id^="montant_"]').each(function() {
            if (parseFloat($(this).val()) == 0) {
                $(this).before('<label class="error">Il faut supperieur à 0</label>')
                valide = false
            }

        })
        $('input[id^="numero_"]').each(function() {
            if ($(this).val() == '') {
                $(this).before('<label class="error">Champ Obligatoire</label>')
                valide = false
            }

        })
        if (valide) {
            $.ajax({
                url: '{{path('gds_vente_reglement_edit')}}',
                type: 'post',
                dataType: 'json',
                data: 'id={{reglement.id}}&lignes={"lignes" : ' + JSON.stringify(lignes) + '}',
                success: function(data) {
                    if (data.success) {
                        $.msgBox({
                            title: "Reglement",
                            content: "Enregistrement Effectué avec succés",
                            type: "info",
                            buttons: [{value: "OK"}],
                            success: function(result) {
                                location.reload();
                            }
                        });
                    } else {
                        $.msgBox({
                            title: "Reglement",
                            content: "Erreur D'enregistrement",
                            type: "error",
                            buttons: [{value: "OK"}]
                        });
                    }
                }
            })
        }
    }
    function reloadReglement() {
        $('#list_ligne_reglement').html('')
        for (var i = 0; i < lignes.length; i++) {
            $('#list_ligne_reglement').append('<tr id="ligne_' + i + '">' +
                    '<td class="numero" >' + i + '</td>' +
                    '<td>' + lignes[i].type + '</td>' +
                    '<td><input onkeyup="Test(this)" id="montant_' + i + '" type="text" /></td>' +
                    '<td id="td_numero_' + i + '">-</td>' +
                    '<td id="td_compte_' + i + '">-</td>' +
                    '<td id="td_date_' + i + '">-</td>' +
                    '<td>' + lignes[i].etat + '</td>' +
                    '<td><a class="tip" href="javascript:removeLigne(' + i + ')" title="Supprimer">' +
                    '<span class="icon12 icomoon-icon-remove"></span>' +
                    '</a></td>' +
                    '</tr>')
            if (lignes[i].type != 'Espece') {
                $('#td_numero_' + i).html('<input type="text" id="numero_' + i + '" value="' + lignes[i].numero_piece + '" />')
                $('#td_compte_' + i).html('<select id="compte_' + i + '"></select>')
                for (var j = 0; j < comptes.length; j++) {
                    $('#compte_' + i).append('<option value="' + comptes[j].id + '">' + comptes[j].value + '</option>')
                }
                $('#compte_' + i + ' option').each(function() {
                    $(this).removeAttr('selected')
                    if ($(this).val() == lignes[i].compte)
                        $(this).attr('selected', 'selected')
                })


                $('#td_compte_' + i).html()
                $('#td_date_' + i).html('<input type="text" id="date_' + i + '" value="' + lignes[i].date_echeance + '" />')
                $('#date_' + i).datepicker()
            }
            $('#montant_' + i).spinner({
                min: 0,
                max: 9999999,
                step: 1,
                places: 3,
                showOn: 'both'
            });
            $('#montant_' + i).val(lignes[i].montant)


        }
        changeLignes()
    }
    function changeLignes() {
        $('input[id^="montant_"]').change(function() {
            var index = $(this).attr('id')
            index = index.split('_')
            index = index[1]
            lignes[index].montant = $(this).val()
        });
        $('input[id^="date_"]').change(function() {
            var index = $(this).attr('id')
            index = index.split('_')
            index = index[1]
            lignes[index].date_echeance = $(this).val()
        });
        $('input[id^="numero_"]').change(function() {
            var index = $(this).attr('id')
            index = index.split('_')
            index = index[1]
            lignes[index].numero_piece = $(this).val()
        });
        $('select[id^="compte_"]').change(function() {
            var index = $(this).attr('id')
            index = index.split('_')
            index = index[1]
            lignes[index].compte = $(this).val()
        });
    }
    function removeLigne(i) {
        lignes.splice(i, 1)
        reloadReglement()
    }
    function Test(obj) {
        var data = obj.value;
        var d = data.substring(0, data.length - 1)
        var index_virgule = data.indexOf('.')
        if (index_virgule > 0)
            apres_virgule = data.substring(data.indexOf('.') + 1, data.length)
        if (!TestVerif(data) || apres_virgule.length > 3)
            obj.value = d
    }
    function TestVerif(decimal) {
        var entier = "0123456789"
        var virgule = false
        var first_number = false
        for (index_verif = 0; index_verif < decimal.length; index_verif++) {
            if (entier.indexOf(decimal[index_verif]) < 0) {
                if (decimal[index_verif] == '.' && first_number) {
                    if (virgule)
                        return false
                    else
                        virgule = true
                } else {
                    return false
                }
            } else {
                first_number = true
            }
        }
        return true
    }
    function retourListeReglement() {
        $.ajax({
            url: "{{ path('gds_vente_liste_reglement') }}",
            data: 'retour=true' + '&numero=' + lf[0] + '&client=' + lf[1] + '&date1=' + lf[2] + '&date2=' + lf[3] + '&heure1=' + lf[4] + '&heure2=' + lf[5]
                    + '&ref_b=' + lf[6] + '&ref_f=' + lf[7] + '&ttc1=' + lf[8] + '&ttc2=' + lf[9] + '&is_cloture=' + lf[10],
            success: function(data) {
                $('#div_liste_reglement').replaceWith(data)
                $('#filtre_numero').val(lf[0])
                $('#client').val(lf[1])
                $('#filtre_date1').val(lf[2])
                $('#filtre_date2').val(lf[3])
                $('#filtre_ref_b').val(lf[6])
                $('#filtre_ref_f').val(lf[7])
                $('#filtre_ttc1').val(lf[8])
                $('#filtre_ttc2').val(lf[9])
            }
        })
    }
        </script>